<template>
  <div class="shopping-cart">
    <NavigationBar />
    <div class="cart-container">
      <h1>购物车</h1>
      
      <div v-if="cartStore.cartItems.length" class="cart-content">
        <!-- 全选控制栏 -->
        <div class="select-all-bar">
          <input 
            type="checkbox"
            id="select-all"
            :checked="isAllSelected"
            @change="toggleSelectAll"
            class="select-all-checkbox"
          />
          <label for="select-all" class="select-all-label">全选</label>
          <span class="selected-count">已选 {{ cartStore.selectedItems.length }} 件</span>
        </div>
        
        <!-- 商品列表 -->
        <div class="cart-items">
          <div v-for="item in cartStore.cartItems" :key="item.id" class="cart-item">
            <input 
              type="checkbox" 
              :checked="cartStore.selectedItems.includes(item.id)"
              @change="cartStore.toggleItemSelection(item.id)"
              class="item-checkbox"
            />
            <img :src="item.image" :alt="item.name" class="cart-item-image" />
            <div class="cart-item-details">
              <h3>{{ item.name }}</h3>
              <p class="price">￥{{ item.price.toFixed(2) }}</p>
              <div class="quantity-control">
                <button @click="decrementQuantity(item)">-</button>
                <span>{{ item.quantity }}</span>
                <button @click="incrementQuantity(item)">+</button>
              </div>
            </div>
            <button class="remove-btn" @click="removeItem(item.id)">×</button>
          </div>
        </div>
        
        <!-- 结算汇总 -->
        <div class="cart-summary">
  <div class="summary-row">
    <span>选中商品:</span>
    <span>{{ cartStore.selectedItems.length }} 件</span>
  </div>
  <div class="summary-row">
    <span>商品总数:</span>
    <span>{{ cartStore.selectedTotalItems() }}</span>
  </div>
  
  <div class="summary-row original-price-row">
    <span>原价总计:</span>
    <span>￥{{ calculateOriginalTotal().toFixed(2) }}</span>
  </div>
  
  <div class="summary-row discount-row">
    <span>优惠金额:</span>
    <span>-￥{{ (calculateOriginalTotal() - cartStore.selectedTotalPrice()).toFixed(2) }}</span>
  </div>
  
  <div class="summary-row total">
    <span>实付金额:</span>
    <span>￥{{ cartStore.selectedTotalPrice().toFixed(2) }}</span>
  </div>
  
  <button 
    class="checkout-btn" 
    @click="checkout"
    :disabled="cartStore.selectedItems.length === 0"
  >
    去结算 ({{ cartStore.selectedItems.length }})
  </button>
</div>
      </div>
      
<!-- 修改空购物车部分代码 -->
<div v-else class="empty-cart">
  <div class="empty-cart-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#8e8c84" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="10" cy="20.5" r="1"/><circle cx="18" cy="20.5" r="1"/>
      <path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"/>
    </svg>
  </div>
  <p>您的购物车是空的</p>
  <router-link to="/pet-products" class="continue-shopping">去逛逛</router-link>
</div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart';
import NavigationBar from '@/components/NavigationBar.vue';
import Footer from '@/components/Footer.vue';
import { onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
import { computed } from 'vue';
const cartStore = useCartStore();
// 计算属性：是否全部选中
const isAllSelected = computed(() => {
  return cartStore.cartItems.length > 0 && 
         cartStore.selectedItems.length === cartStore.cartItems.length;
});

// 全选/取消全选
const toggleSelectAll = () => {
  if (isAllSelected.value) {
    cartStore.clearSelection();
  } else {
    cartStore.selectedItems = cartStore.cartItems.map(item => item.id);
  }
};
const incrementQuantity = (item) => {
  cartStore.addToCart({ ...item, quantity: 1 });
};

const decrementQuantity = (item) => {
  if (item.quantity > 1) {
    cartStore.addToCart({ ...item, quantity: -1 });
  } else {
    cartStore.removeItem(item.id);
  }
};

const removeItem = (itemId) => {
  cartStore.removeItem(itemId);
};

const checkout = async () => {
  if (cartStore.selectedItems.length === 0) {
    await ElMessageBox.alert('请至少选择一件商品', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
    return;
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要结算选中的 ${cartStore.selectedItems.length} 件商品吗？总计: ￥${cartStore.selectedTotalPrice().toFixed(2)}`, 
      '确认结算', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );// 支付成功后只移除选中商品
    cartStore.selectedItems.forEach(id => {
      cartStore.removeItem(id);
    });
    cartStore.clearSelection();
    
  } catch (error) {
    console.log('用户取消了结算');
  }
};

// 计算选中商品的原价总计（不考虑折扣）
const calculateOriginalTotal = () => {
  return cartStore.cartItems
    .filter(item => cartStore.selectedItems.includes(item.id))
    .reduce((total, item) => total + (item.price * item.quantity), 0);
};

onMounted(() => {
  // 可以添加额外的数据验证或初始化逻辑
});
</script>

<style scoped>
.shopping-cart {
  background-color: #f9f5f0;
  min-height: 100vh;
}

.cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  color: #8b7355;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.cart-content {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

/* 全选控制栏样式 */
.select-all-bar {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  background-color: #fafafa;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.select-all-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-right: 10px;
}

.select-all-label {
  font-size: 0.95rem;
  color: #5a4a42;
  cursor: pointer;
  margin-right: auto;
}

.selected-count {
  font-size: 0.9rem;
  color: #8b7355;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 1.2rem;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.cart-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.item-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-right: 15px;
}

.cart-item-image {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-right: 1.5rem;
  border-radius: 6px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-details h3 {
  margin: 0 0 0.5rem;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
}

.price {
  color: #d4a373;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-control button {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.quantity-control button:hover {
  background-color: #f5f5f5;
  color: #d4a373;
}

.quantity-control span {
  min-width: 30px;
  text-align: center;
}

.remove-btn {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #f8f4ee;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  color: #a89f94;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-btn:hover {
  background-color: #f0e6d8;
  color: #d4a373;
}

.empty-cart {
  text-align: center;
  padding: 3rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.empty-cart-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.empty-cart p {
  color: #8e8c84;
  font-size: 1.2rem;
  margin-bottom: 1.8rem;
}

.continue-shopping {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: #d4a373;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s;
}

.continue-shopping:hover {
  background-color: #cb997e;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(212, 163, 115, 0.3);
}

.cart-summary {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #fafafa;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  color: #5a4a42;
  font-size: 1rem;
}

/* 原价行样式 */
.summary-row.original-price-row {
  color: #888;
  font-size: 0.9rem;
  text-decoration: line-through;
}

/* 优惠行样式 */
.summary-row.discount-row {
  color: #d4a373;
  font-weight: bold;
}

/* 总计行样式调整 */
.summary-row.total {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 0.3rem;
  padding-top: 0.8rem;
  border-top: 1px solid #eee;
  color: #b5838d; /* 可以调整为更醒目的颜色 */
}

.checkout-btn {
  width: 100%;
  padding: 1rem;
  margin-top: 1.5rem;
  background-color: #d4a373;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.checkout-btn:hover:not(:disabled) {
  background-color: #cb997e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 163, 115, 0.4);
}

.checkout-btn:disabled {
  background-color: #ddd;
  cursor: not-allowed;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .cart-container {
    padding: 1rem;
  }
  
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-bottom: 2.5rem;
  }
  
  .cart-item-image {
    margin-right: 0;
    margin-bottom: 1rem;
    width: 100%;
    height: auto;
    max-height: 200px;
  }
  
  .remove-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
  }
  
  .quantity-control {
    margin-top: 1rem;
  }
}
</style>